<template>
	<view class="setup">
		<view class="setupDetails">
			<u-cell-group>
				<u-cell size="large" title="头像" :isLink="true" arrow-direction="right">
					<view slot="title">
						<text class="u-cell-text">头像</text>
					</view>
					<view slot="value" class="u-slot-value">
						<image class="u-avatar-demo" :src="aspectFill" mode="widthFix" @tap="chooseAvatar">						
					</view>
				</u-cell>
				<u-cell size="large" title="昵称" :isLink="true" :value="nickname" arrow-direction="right"></u-cell>
				<u-cell size="large" title="个人介绍" :isLink="true" :value="personal" arrow-direction="right"></u-cell>
			</u-cell-group>
		</view>
		<view class="setupDetails">
			<u-cell-group>
				<u-cell size="large" :isLink="true" arrow-direction="right">
					<view slot="title">
						<text class="u-cell-text">性别</text>
					</view>
					<view slot="value" class="u-slot-value">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</u-cell>
				<u-cell size="large" :isLink="true" arrow-direction="right">
					<view slot="title">
						<text class="u-cell-text">城市</text>
					</view>
					<view slot="value" class="u-slot-value">
						<pickerAddress @change="change">{{txt}}</pickerAddress>
					</view>
				</u-cell>
				<u-cell size="large" :isLink="true" arrow-direction="right">
					<view slot="title">
						<text class="u-cell-text">生日</text>
					</view>
					<view slot="value" class="u-slot-value">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="setupDetails">
			<u-cell-group>
				<u-cell size="large" title="我的积分" :isLink="true" :value="integral" arrow-direction="right"></u-cell>				
				<u-cell size="large" title="会员等级" :isLink="true" arrow-direction="right" class="vaCorler">
					<text slot="value" class="u-slot-value vaCorler">
						成为会员
					</text>
				</u-cell>				
			</u-cell-group>
		</view>	
		<view class="setupDetails">
			<button class="backBtn" @click="backBtn()">退出登录</button>
		</view>
	</view>
</template>

<script>
	import pickerAddress from './pickerAddress/pickerAddress.vue'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				aspectFill:'../../static/images/1682233317351.jpg',
				nickname:'',
				integral:'查看积分',
				personal:'介绍自己更容易获得关注哦~',
				array: ['男', '女'],
				index: 0,
				date: currentDate,
				txt: '选择地址'
			}
		},
		computed:{
			 startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			
		},
		onLoad() {
			this.me()
		},
		methods: {
			bindPickerChange(e){
				this.index = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			change(data) {
				this.txt = data.data.join('')
			},
			backBtn(){
				uni.request({
					url:'/user/logout',
					method:'post',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'token':uni.getStorageSync('yystoken'),
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log(obj)
						if(obj.statusCode == 200){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
					}
				})
			},
			me(){
				uni.request({
					url:'/user/me',
					method:'get',
					header:{
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log(obj.data.data)
						this.nickname = obj.data.data.nickName
					}
				})
			}
		},
		components:{
			pickerAddress
		}
	}
</script>

<style lang="scss">
.setup{
	background-color: #f4f4f4;
	padding: 1rpx 0 20rpx;
	min-height: 100vh;
	.setupDetails{
		margin-top: 23rpx;
		background-color: #fff;
		padding: 4rpx 30rpx;
		.u-avatar-demo{
			width: 58rpx;
			border-radius: 50%;
		}
		.vaCorler{
			uni-text{
				color: #16843F;
			}
		}
		.backBtn{
			background: none;
			border: none;
			&::after{
				display: none;
			}
		}
	}
}
</style>
